<template>
    <div>
        <h2 align="center">注册页面</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" v-model="data.name"/></td>
                </tr>

                <tr>
                    <td>密码：</td>
                    <td><input type="password" v-model="data.pwd"/></td>
                </tr>

                <tr>
                    <td>性别：</td>
                    <td><input type="radio" name="sex" :value="1" v-model="data.sex"/>男
                        <input type="radio" name="sex" :value="2" v-model="data.sex"/>女
                    </td>
                </tr>

                <tr>
                    <td>爱好</td>
                    <td><input type="checkbox" name="hobby" value="游泳" v-model="data.hobby"/>游泳
                        <input type="checkbox" name="hobby" value="健身" v-model="data.hobby"/>健身
                        <input type="checkbox" name="hobby" value="睡觉" v-model="data.hobby"/>睡觉
                        <input type="checkbox" name="hobby" value="跳绳" v-model="data.hobby"/>跳绳
                    </td>
                </tr>

                <tr>
                    <td>出生地</td>
                    <td>
                        <select v-model="data.citys">
                            <option value="" >请选择</option>
                            <option :value="item.id" v-for="item in citys" :key="item.id" >{{item.name}}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="date" v-model="data.birth"/>
                    </td>
                </tr>

                <tr>
                    <td>个人简介</td>
                    <td>
                        <textarea cols="15" rows="5" v-model="data.content"></textarea>
                    </td>
                </tr>

                <tr>
                    <td>是否同意</td>
                    <td>
                        <input type="checkbox" v-model="data.IsYes"/>
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="注册" @click="add" class="btn btn-primary"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
    import {ref,reactive} from 'vue'

    let citys=ref([
        {id:1,name:"上海"},
        {id:2,name:"北京"},
        {id:3,name:"山西"},
        {id:4,name:"河北"},
        {id:5,name:"广东"},
        {id:6,name:"黑龙江"}
    ])

    let data = reactive({
        name:"",
        pwd:"",
        sex:1,
        hobby:[],
        citys:"",
        birth:"",
        content:"",
        IsYes:false
    })

    const add=()=>{
        console.log(data);
    }


</script>

<style scoped>

</style>